<template>
	<view style="width: 100%;background: #f3f3f3;">
		<bgyx-nav-bar>
			<view slot="left">
				<u-icon name="arrow-left" size="36"></u-icon>
			</view>
			<view slot="default">
				<b style="font-size: 32rpx;">{{id}}</b>
			</view>
			<view slot="right" style="display: flex;justify-content: flex-end;align-items: center;">
				<u-icon name="more-circle" size="42"></u-icon>
			</view>
		</bgyx-nav-bar>

		<view style="width: 100%;display: flex; padding-bottom: 120rpx;flex-direction: column-reverse;">
			<view :id="`viewId${k}`" v-for="(item,k) in messages">
				<msgTextItem :myMsg="k%2 == 0" :title="item" />
			</view>
		</view>

		<view
			style="width: 100%;height: 110rpx;display: flex;background: white;position: fixed;bottom: 0rpx;background: #f8f8f8;align-items: center;">
			<view style="margin-left: 20rpx;margin-top: 5rpx;">
				<image src="/static/images/icon_speak.png" style="width: 60rpx;height: 60rpx;" mode=""></image>
			</view>
			<view style="margin-left: 20rpx;margin-top: 5rpx;flex:1;">
				<u-input confirm-type="send" :auto-height="true" :border="true" />
			</view>
			<view style="margin-left: 20rpx;margin-top: 5rpx;">
				<image src="/static/images/icon_emjo.png" style="width: 62rpx;height: 62rpx;" mode=""></image>
			</view>
			<view style="margin-left: 20rpx;margin-top: 5rpx;margin-right: 20rpx;">
				<image src="/static/images/icon_addmenu.png" style="width: 60rpx;height: 60rpx;" mode=""></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	var Color = plus.android.importClass("android.graphics.Color");
	plus.android.importClass("android.view.Window");
	var mainActivity = plus.android.runtimeMainActivity();
	var window_android = mainActivity.getWindow();
	window_android.setNavigationBarColor(Color.parseColor("#f8f8f8"));
	// #endif
	import msgTextItem from '../components/msgTextItem.vue'
	export default {
		data() {
			return {
				id: '',
				friend: {},
				messages: [2, 2, 5, 6, 2, 5, 4, 12, 5, 4, 5, 4, 5, 21, 5, 4, 8, 5, 21, 5, 5, 4, 5, 6, 5, 5, 85, 5, 5, 5, 5,
					5, 2, 3, 3, 89
				],
				currentTime: '',
				loading: false,
				ttt:0
			}
		},
		components: {
			msgTextItem
		},
		onLoad({
			id
		}) {
			this.id = id
			
		},
		onReady() {
			uni.pageScrollTo({
				scrollTop:999999,
				duration:100
			})
		},
		onPageScroll(e) {
			console.log(e)
			const _this = this
			if(e.scrollTop > 300){
				this.ttt  = 1
			}
			if(this.loading){
				uni.pageScrollTo({
					scrollTop:150,
					duration:0
				})
				return
			}
			if (e.scrollTop <= 150 && !this.loading && this.ttt > 0) {
				this.loading = true
				
				setTimeout(function(){
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.messages.push(Math.random() + "kfs" + Math.random())
					_this.loading = false
				},2000)
			}
		},
		methods: {
			upper: function(e) {

			},
			lower: function(e) {
				console.log(123112333, e)
			},
			scroll: function(e) {
				console.log(123112344, e)
			},
		}
	}
</script>

<style>
</style>